<template>
    <template v-for="item in menuItem">
        <!-- 多级菜单 -->
        <el-sub-menu v-if="item?.children && item.children.length" :key="item.routePath" :index="item.routePath">
            <template #title>
                <el-icon v-if="item.icon">
                    <component :is="item.icon"></component>
                </el-icon>
                <span>{{ item.label }}</span>
            </template>
            <!-- 递归菜单 -->
            <sidebar-item :menu="item.children" />
        </el-sub-menu>
        <!-- 一级菜单 -->
        <template v-else>
            <el-menu-item :key="item.routePath" :index="item.routePath" @click="e => $router.push(e.index)">
                <el-icon v-if="item.icon">
                    <component :is="item.icon"></component>
                </el-icon>
                <span>{{ item.label }}</span>
            </el-menu-item>
        </template>
    </template>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import { GlobalMenuOption } from '@/interface';

interface Props {
    menu: GlobalMenuOption[];
}
const props = withDefaults(defineProps<Props>(), {
    menu: () => []
});
const menuItem = computed(() => props.menu);
</script>

<script lang="ts">
export default {
    name: 'SidebarItem'
};
</script>
